<template>
    <div>
        <el-menu :collapse="isCollapse" :default-active="$route.path" background-color="#304156" text-color="#f0f0f0" active-text-color="#409EFF">

            <template v-for="item in menus">

                <template v-if="item.children && item.children.length === 1 && !item.meta.hideInMenu">

                    <template v-if="item.path === '/'">
                        <router-link :to="item.path" :key="`menu-${item.name}`">
                            <el-menu-item :index="item.children[0].path" :key="`menu-${item.name}`">
                                <i :class="item.meta.icon"></i>
                                <span slot="title">{{item.children[0].meta.title}}</span>
                            </el-menu-item>
                        </router-link>
                    </template>

                    <template v-else>
                        <router-link :to="item.path+'/'+item.children[0].path" :key="`menu-${item.name}`">
                            <el-menu-item :index="item.path+'/'+item.children[0].path" :key="`menu-${item.name}`">
                                <i :class="item.meta.icon"></i>
                                <span slot="title">{{item.children[0].meta.title}}</span>
                            </el-menu-item>
                        </router-link>
                    </template>

                </template>

                <template v-else>

                    <template v-if="item.children && !item.meta.hideInMenu">

                        <el-submenu :index="item.name" :key="`menu-${item.name}`">
                            <template slot="title">
                                <i :class="item.meta.icon"></i>
                                <span>{{item.meta.title}}</span>
                            </template>

                            <template v-for="child in item.children">
                                
                                <!-- 三级以下递归 -->
                                <sidebar-menu-sub-item :subMenus="[child]" v-if="child.children" :key="`menu-sub-${child.name}`">
                                </sidebar-menu-sub-item>

                                <!-- 新窗口打开外部链接 -->
                                <template v-if="child.meta && child.meta.target === '_blank'">
                                    <a :href="child.meta.href" target="_blank" :key="`menu-${child.name}`">
                                        <el-menu-item :index="child.meta.title" :key="`menu-${child.name}`">
                                            <i :class="child.meta.icon"></i>
                                            <span slot="title">{{child.meta.title}}</span>
                                        </el-menu-item>
                                    </a>
                                </template>
                                <template v-else>
                                    <router-link :to="item.path+'/'+child.path" :key="item.path+'/'+child.path">
                                        <el-menu-item :index="item.path+'/'+child.path" :key="`menu-sub-${child.name}`" v-if="!child.children && !child.meta.hideInMenu">
                                            <i :class="child.meta.icon"></i>
                                            <span slot="title">{{child.meta.target}}{{child.meta.title}}</span>
                                        </el-menu-item>
                                    </router-link>
                                </template>
                                
                            </template>
                        </el-submenu>

                    </template>

                    <!-- 新窗口打开外部链接 -->
                    <template v-if="item.meta && item.meta.target === '_blank'">
                        <a :href="item.meta.href" target="_blank" :key="`menu-${item.name}`">
                            <el-menu-item :index="item.meta.title" :key="`menu-${item.name}`">
                                <i :class="item.meta.icon"></i>
                                <span slot="title">{{item.meta.title}}</span>
                            </el-menu-item>
                        </a>
                    </template>

                </template>
            </template>

        </el-menu>
    </div>
</template>

<script>
import { mapGetters } from "vuex";
import SidebarMenuSubItem from "./layout-sidebar-menu-subitem";
export default {
    name: "SidebarMenu",
    components: {
        SidebarMenuSubItem
    },
    computed: {
        ...mapGetters(["sidebar"]),
        isCollapse() {
            return this.sidebar;
        }
    },
    data() {
        return {};
    },
    props: {
        menus: {
            type: Array,
            default() {
                return [];
            }
        }
    }
};
</script>

<style scoped>
</style>